<template>
  <div class="jk_jiegou_wrap">
    <div class="jk_jiegou">
      <div class="jiegou_main">
        <div class="jiegou_top_wrap">
          <div class="top_list">
            <div class="list_item" v-for="item in topList" :key="item.id">
              <div class="item_title">{{ item.name }}</div>
              <div class="item_img" @click="onShowDialogFn(item)">
                <img :src="item.imgUrl" alt="" />
              </div>
            </div>
          </div>
          <div class="top_h2">
            <div class="h2_title">
              <div class="h2_title_text">ONET-操作网</div>
            </div>
          </div>
        </div>
        <div class="jiegou_btm_wrap">
          <div class="btm_title">
            <div class="btn_title_text">逻辑子网</div>
          </div>
          <div class="btm_list1">
            <div class="list_item" v-for="item in btmList1" :key="item.id">
              <div class="item_title">{{ item.name }}</div>
              <div class="item_img" @click="onShowDialogFn(item)">
                <img :src="item.imgUrl" alt="" />
              </div>
            </div>
          </div>
          <div class="btm_h2">
            <div class="h2_title">
              <div class="h2_title_text">CNET-控制网</div>
            </div>
          </div>
          <div class="btm_list2">
            <div class="list_item" v-for="item in btmList2" :key="item.id">
              <div class="item_title">{{ item.name }}</div>
              <div class="item_img" @click="onShowDialogFn(item)">
                <img :src="item.imgUrl" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 弹窗 -->
      <el-dialog
        title="模块信息"
        :visible.sync="dialogVisible1"
        width="50%"
        custom-class="jk_common_dialog01"
        :show-close="false"
      >
        <div class="dialog_center" v-if="currentDialogItem">
          <div class="con">
            <div class="con-left">
              <div class="img_wrap">
                <img :src="currentDialogItem.imgUrl" alt="" />
              </div>
              <div class="text-list">
                <p>设备编号：1011</p>
                <p>设备型号：D1211</p>
                <p>所属模块：{{ currentDialogItem.name || "未知设备" }}</p>
                <p>设备型号：D1211</p>
              </div>
            </div>
            <div class="con-right">
              <span>健康度</span><br />
              <div class="echarts_main">
                <pieCharts
                  :echartsData="peiChartsData2"
                  id="piechart2"
                  :width="'250px'"
                  :height="'250px'"
                  :type="2"
                />
              </div>
            </div>
          </div>
          <div class="con">
            <div class="con-left-table">
              <p>异常原因记录</p>
              <br />
              <div class="con-left22">
                <el-table
                  class="jk_common_table002"
                  style="width: 100%; height: 200px"
                  height="style"
                  :data="tableData1"
                >
                  <el-table-column prop="reason" label="异常原因">
                  </el-table-column>
                  <el-table-column prop="type" label="异常类型">
                  </el-table-column>
                  <el-table-column prop="time" label="异常时间" width="150">
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="con-right con-right-line">
              <p>设备健康趋势</p>
              <br />
              <div class="con-right22">
                <div class="charts_box">
                  <lineCharts />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer">
          <div class="btns_wrap">
            <div class="sure_btn" @click="dialogVisible1 = false">确定</div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import pieCharts from "./component/pieCharts.vue";
import lineCharts from "./component/lineCharts.vue";
export default {
  components: {
    pieCharts,
    lineCharts,
  },
  data() {
    return {
      inputVal: "",
      dialogVisible1: false,
      peiChartsData2: {
        value: 65,
        name: "65",
      },
      tableData1: [
        {
          reason: "网络中断",
          type: "其他",
          time: "2020.11.11 22:00:00",
        },
        {
          reason: "网络波动",
          type: "网络",
          time: "2020.11.11 22:00:00",
        },
        {
          reason: "网络中断",
          type: "网络",
          time: "2020.11.11 22:00:00",
        },
        {
          reason: "网络中断",
          type: "网络",
          time: "2020.11.11 22:00:00",
        },
        {
          reason: "网络中断",
          type: "网络",
          time: "2020.11.11 22:00:00",
        },
      ],
      topList: [
        {
          id: "1",
          name: "操作员站1",
          imgUrl: require("../../../assets/images/wljg_item01.png"),
        },
        {
          id: "2",
          name: "操作员站2",
          imgUrl: require("../../../assets/images/wljg_item01.png"),
        },
        {
          id: "3",
          name: "历史服务器",
          imgUrl: require("../../../assets/images/wljg_item02.png"),
        },
        {
          id: "4",
          name: "历史服务器(冗余)",
          imgUrl: require("../../../assets/images/wljg_item02.png"),
        },
        {
          id: "5",
          name: "计算服务器",
          imgUrl: require("../../../assets/images/wljg_item02.png"),
        },
        {
          id: "6",
          name: "网管",
          imgUrl: require("../../../assets/images/wljg_item03.png"),
        },
        {
          id: "7",
          name: "网闸",
          imgUrl: require("../../../assets/images/wljg_item04.png"),
        },
      ],
      btmList1: [
        {
          id: "1",
          name: "通信服务器A",
          imgUrl: require("../../../assets/images/wljg_item02.png"),
        },
        {
          id: "2",
          name: "通信服务器B",
          imgUrl: require("../../../assets/images/wljg_item02.png"),
        },
      ],
      btmList2: [
        {
          id: "1",
          name: "控制柜1",
          imgUrl: require("../../../assets/images/wljg_item05.png"),
        },
        {
          id: "2",
          name: "控制柜2",
          imgUrl: require("../../../assets/images/wljg_item05.png"),
        },
        {
          id: "3",
          name: "控制柜3",
          imgUrl: require("../../../assets/images/wljg_item05.png"),
        },
        {
          id: "4",
          name: "控制柜4",
          imgUrl: require("../../../assets/images/wljg_item05.png"),
        },
        {
          id: "5",
          name: "控制柜5",
          imgUrl: require("../../../assets/images/wljg_item05.png"),
        },
      ],
      currentDialogItem: {},
    };
  },
  methods: {
    onShowDialogFn(item) {
      this.currentDialogItem = item;
      this.dialogVisible1 = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.jk_jiegou_wrap {
  width: 100%;
  height: 100vh;
  min-height: 1080px;
  .jk_jiegou {
    width: 100%;
    height: 100%;
    background: url("../../../assets/images/wljg_bg.png") center center
      no-repeat;
    background-size: 100% 100%;
    position: relative;
    box-sizing: border-box;
    padding: 22px;
    .jiegou_main {
      width: 100%;
      height: 100%;
      padding: 0 40px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .jiegou_top_wrap {
        .top_list {
          display: flex;
          box-sizing: border-box;
          .list_item {
            flex: 1 1 auto;
            width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            perspective: 1000px;
            perspective-origin: 50% 50%;
            padding-bottom: 30px;
            position: relative;
            .item_title {
              border: 1px solid #2281bc;
              border-radius: 4px;
              background: linear-gradient(to right, #092e6a, #2189ce, #092e6a);
              padding: 8px 25px;
              font-size: 16px;
              font-weight: 700;
              color: #fff;
              position: relative;
              transform: rotateX(-30deg) rotateY(-45deg);
              &::after {
                content: "";
                position: absolute;
                width: 8px;
                height: 8px;
                background-color: #ffab24;
                top: 0;
                left: 0;
              }
            }
            .item_img {
              width: 110px;
              height: 100px;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              cursor: pointer;
              &:hover {
                opacity: 0.9;
              }
            }
            &:nth-child(-n + 6) {
              &::after {
                content: "";
                position: absolute;
                width: 1px;
                height: 40px;
                border-left: 1px dashed #2bf5ff;
                bottom: 8px;
                left: 40%;
              }
              &::before {
                content: "";
                position: absolute;
                width: 1px;
                height: 55px;
                border-right: 1px dashed #00ff00;
                bottom: -8px;
                right: 40%;
              }
            }
            &:last-child {
              &::after {
                content: "";
                position: absolute;
                width: 58%;
                height: 1px;
                border-top: 1px dashed #2bf5ff;
                top: 42%;
                left: -28%;
              }
              &::before {
                content: "";
                position: absolute;
                width: 58%;
                height: 1px;
                bottom: 42%;
                left: -28%;
                border-bottom: 1px dashed #00ff00;
              }
            }
          }
        }
        .top_h2 {
          width: 100%;
          height: 70px;
          box-sizing: border-box;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          .h2_title {
            width: 275px;
            height: 48px;
            background: url("../../../assets/images/wljg_bg_title1.png") center
              center no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 12px;
            position: relative;
            z-index: 4;
            .h2_title_text {
              background: linear-gradient(
                to bottom,
                rgba(14, 197, 236, 0.6),
                rgba(0, 222, 255, 0.6),
                rgba(239, 252, 254, 0.6)
              );
              font-size: 20px;
              background-clip: text;
              color: transparent;
              font-weight: 700;
            }
          }
          &::after {
            content: "";
            position: absolute;
            top: -8px;
            left: 20px;
            right: 40px;
            height: 70px;
            box-sizing: border-box;
            border: 1px solid #2bf5ff;
            background: rgba(43, 245, 255, 0.05);
          }
          &::before {
            content: "";
            position: absolute;
            height: 70px;
            bottom: -8px;
            right: 20px;
            left: 40px;
            box-sizing: border-box;
            border: 1px solid #00ff00;
            background: rgba(0, 255, 0, 0.05);
          }
        }
      }
      .jiegou_btm_wrap {
        border: 2px dashed #014fa7;
        border-radius: 4px;
        margin-top: 5%;
        position: relative;
        padding: 20px 0 60px;
        .btm_title {
          position: absolute;
          width: 188px;
          height: 65px;
          left: 0;
          top: 20px;
          background: url("../../../assets/images/wljg_bg_title2.png") center
            center;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          .btn_title_text {
            background: linear-gradient(
              to bottom,
              rgba(14, 197, 236, 0.6),
              rgba(0, 222, 255, 0.6),
              rgba(239, 252, 254, 0.6)
            );
            font-size: 18px;
            background-clip: text;
            color: transparent;
            font-weight: 700;
          }
        }
        .btm_list1,
        .btm_list2 {
          display: flex;
          box-sizing: border-box;
          padding: 40px 40px 0;
          .list_item {
            flex: 1 1 auto;
            width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            perspective: 1000px;
            perspective-origin: 50% 50%;
            cursor: pointer;
            &:hover {
              opacity: 0.9;
            }
            .item_title {
              border: 1px solid #2281bc;
              border-radius: 4px;
              background: linear-gradient(to right, #092e6a, #2189ce, #092e6a);
              padding: 8px 25px;
              font-size: 16px;
              font-weight: 700;
              color: #fff;
              position: relative;
              transform: rotateX(-30deg) rotateY(-45deg);
              z-index: 6;
              &::after {
                content: "";
                position: absolute;
                width: 8px;
                height: 8px;
                background-color: #ffab24;
                top: 0;
                left: 0;
              }
            }
            .item_img {
              margin-top: 10px;
              width: 110px;
              height: 100px;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              z-index: 6;
              cursor: pointer;
              &:hover {
                opacity: 0.9;
              }
            }
          }
        }
        .btm_list1 {
          padding-left: 150px;
          padding-right: 150px;
          .list_item {
            &::after {
              content: "";
              position: absolute;
              width: 1px;
              height: 205%;
              border-left: 1px dashed #2bf5ff;
              top: -144px;
              left: 48%;
            }
            &::before {
              content: "";
              position: absolute;
              width: 1px;
              height: 216%;
              top: -144px;
              right: 48%;
              border-right: 1px dashed #00ff00;
            }
            &:last-child {
              &::before {
                height: 140%;
              }
            }
          }
        }
        .btm_list2 {
          .list_item {
            &::after {
              content: "";
              position: absolute;
              width: 1px;
              height: 86%;
              border-left: 1px dashed #2bf5ff;
              top: -78px;
              left: 46%;
            }
            &::before {
              content: "";
              position: absolute;
              width: 1px;
              height: 75%;
              top: -62px;
              right: 46%;
              border-right: 1px dashed #00ff00;
            }
          }
        }
        .btm_h2 {
          width: 100%;
          height: 70px;
          box-sizing: border-box;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 20px 0 30px;
          .h2_title {
            width: 275px;
            height: 48px;
            background: url("../../../assets/images/wljg_bg_title1.png") center
              center no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 12px;
            position: relative;
            z-index: 4;
            .h2_title_text {
              background: linear-gradient(
                to bottom,
                rgba(14, 197, 236, 0.6),
                rgba(0, 222, 255, 0.6),
                rgba(239, 252, 254, 0.6)
              );
              font-size: 20px;
              background-clip: text;
              color: transparent;
              font-weight: 700;
            }
          }
          &::after {
            content: "";
            position: absolute;
            top: -8px;
            left: 20px;
            right: 40px;
            height: 70px;
            box-sizing: border-box;
            border: 1px solid #2bf5ff;
            background: rgba(43, 245, 255, 0.05);
          }
          &::before {
            content: "";
            position: absolute;
            height: 70px;
            bottom: -8px;
            right: 20px;
            left: 40px;
            box-sizing: border-box;
            border: 1px solid #00ff00;
            background: rgba(0, 255, 0, 0.05);
          }
        }
      }
    }
    .dialog_center {
      .con {
        display: flex;
        justify-content: space-between;
        color: #fff;

        .con-left {
          // width: calc(48% - 20px);
          // height: calc(200px - 20px);
          width: 48%;
          height: 200px;
          padding: 10px;
          background: #15427c;
          display: flex;
          justify-content: flex-start;
          align-items: stretch;
          .img_wrap {
            width: 180px;
            height: 180px;
            box-sizing: border-box;
            padding: 20px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              max-width: 100%;
              max-height: 100%;
            }
          }

          .text-list {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
        }

        .con-left-table {
          width: 48%;
        }
        .con-left22,
        .con-right22 {
          height: 200px;
          background: #15427c;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .con-right {
          width: 48%;
          height: 200px;
          background: #15427c;
          position: relative;

          span {
            position: absolute;
            top: 20px;
            left: 20px;
          }

          .echarts_main {
            position: absolute;
            top: -20px;
            left: 100px;
            // width: 200px;
            // height: 200px;
          }

          .charts_box {
            width: 100%;
            height: 92%;
          }
        }

        .con-right-line {
          background: rgba(0, 0, 0, 0);
        }
      }
    }
  }
}
</style>
